import React,{Component} from 'react';
import api from '../../../api'
import './style.css'

class RankingList extends Component {
    constructor(props) {
        super(props)
    
        this.state = {
             officalList:[],
             worldList:[]
        }
    }
    

    componentDidMount(){
        api.getDetailList().then(res=>{
            console.log(res.data.list)
            this.setState({
                officalList:res.data.list.slice(0,4),
                worldList:res.data.list.slice(4),
            })
        })
    }

    goSongSheet = (id) =>{
        return()=>{
            document.documentElement.scrollTop = document.body.scrollTop =0;
            this.props.history.push({pathname:'/songsheet/',state:{id:id}})
        }
    }
    

        render(){
            console.log(this.state.officalList);
            return (
                
                <div className="ranking">
                <div className="offical">
                    <p className="ranking-title">官方帮</p>
                    {
                        this.state.officalList.map((v, i) => {
                            return (
                                <div className="offical-list" key={i}>
                                    <div className="offical-img">
                                        <img src={v.coverImgUrl} alt="" />
                                    </div>
                                    <div className="offical-container" onClick={this.goSongSheet(v.id)}>
                                        {
                                            v.tracks.map((v1, i1) => {
                                                return <p key={i1}>{i1+1}. {v1.first} - {v1.second}</p>
                                            })
                                        }
                                    </div>

                                </div>
                                )
                        })
                    }
                </div>
                <div className="word">
                    <p className="ranking-title">全球榜</p>
                    <div className="word-list">
                        {
                            this.state.worldList.map((v,i)=>{
                                return (
                                    <div key={i} onClick={this.goSongSheet(v.id)}>
                                        <img src={v.coverImgUrl} alt="" />
                                    </div>
                                )
                            })
                        }
                    </div>
                </div>

            </div >
            );
        }
    
}

export default RankingList;